<template>
  <a-drawer
    :title="i18n('list.reading','阅读情况')"
    placement="right"
    @close="onInstCc"
    width="500"
    :open="instCcShow"
    :z-index="20000">
  <div>
    <a-table :columns="columns" :data-source="dataSource" :pagination="false">
        <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'userId'">
                <rx-user-info :userId="record.instCp.userId"></rx-user-info>
            </template>
            <template v-if="column.key === 'isRead'">
                <a-tag :color="readMap[record.instCp.isRead].color">
                    <span>{{readMap[record.instCp.isRead].text}}</span>
                </a-tag>
            </template>
            <template v-if="column.key === 'updateTime'">
                {{record.instCp.updateTime}}
            </template>
        </template>


    </a-table>
  </div>
  </a-drawer>
</template>

<script>


    import myBpmApi from "@/views/modules/bpm/js/myBpm";

    export default {
        name: "bpm-inst-cc-detail",
        emits:['update:instCcShow'],
        props:{
            instId:{type:String},
            instCcShow:{type:Boolean,default:false},
        },
        data(){
            return {
                dataSource:[],
                columns:[
                    {
                        key: 'userId',
                        title: this.i18n('ccShow.recipient','接收人'),
                        dataIndex: 'userId',
                        width:120,
                    },

                    {
                        key: 'isRead',
                        title: this.i18n('ccShow.isRead','是否已读'),
                        dataIndex: 'isRead',
                        width:120,
                    },
                    {
                        key: 'updateTime',
                        title: this.i18n('ccShow.readTime','阅读时间'),
                        dataIndex: 'updateTime',
                        width:120,
                    }
                ],
                readMap: {
                    "YES": { color: 'green', text: this.i18n('ccShow.yes','已读') },
                    "NO": { color: 'red', text: this.i18n('ccShow.no','未读') },
                }
            }
        },
        methods: {
          i18n(name,text,key){
              return this.$ti18(name,text,"MyTurnTo",key);
          },
          onInstCc() {
            this.$emit('update:instCcShow', false)
          },
          getByInstId() {
              myBpmApi.getByInstId(this.instId).then(res=>{
                this.dataSource=res;
              })
          }
        },
        watch:{
            instCcShow:function(val){
                if(val){
                   this.getByInstId();
                }
            }
        }
    }
</script>

<style scoped>

.ant-steps-vertical{
    margin-left: 10px;
    margin-top: 10px;
}

.ant-steps-item-content{
    width:100%;
    margin-left: 10px;
    padding-right: 10px;
}

.ant-steps-item-description{
  width:380px;
}

  .opDesp {
    font-size: 12px;
    line-height: 32px;
    color:blue;
    width: 100%;
  }

  .time {
    font-size:10px;
    color: darkgray;

    width: 100%;
    line-height: 26px;
  }

  .AGREE {
    font-weight: bold;
    color: green;
  }

  .BACK,.BACK_SPEC,.BACK_TO_STARTOR {
    font-weight: bold;
    color: red;
  }
</style>
